<template>
    <div style="width: 100%; height: 90%">
        <div class="chart3"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
        }
    },
    mounted() {
        this.init()
    },
    computed: {},

    methods: {
        // getList() {
        //     /** 事件类型统计分布 */
        //     apis.analysisType({}).then(result => {
        //         let res = result.data;
        //         this.list = res;
        //         // this.databox2 = res;
        //         this.init();
        //     });
        // },
        init() {
            var myChart = echarts.init(document.querySelector(".chart3"));

            // (1)准备数据
            var data = {
                year: [
                    [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                    [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
                ]
            };

            // 2. 指定配置和数据
            var option = {
                // color: ["#00f2f1", "#ed3f35"],
                tooltip: {
                    // 通过坐标轴来触发
                    trigger: "axis"
                },
                legend: {
                    // 距离容器10%
                    right: "10%",
                    // 修饰图例文字的颜色
                    textStyle: {
                        fontSize: ".2rem",
                        color: "#fff"
                    }
                    // 如果series 里面设置了name，此时图例组件的data可以省略
                    // data: ["邮件营销", "联盟广告"]
                },
                grid: {
                    top: "20%",
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                    ],
                    // 去除刻度
                    axisTick: {
                        show: false
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: "rgba(255,255,255,1)"
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: true
                    },
                    // 去除刻度
                    axisTick: {
                        show: false
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: "rgba(255,255,255, 1)"
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                },
                series: [
                    {
                        name: "常规巡查",
                        type: "line",
                        stack: "总量",
                        // 是否让线条圆滑显示
                        smooth: true,
                        data: data.year[0]
                    },
                    {
                        name: "专项巡查",
                        type: "line",
                        stack: "总量",
                        smooth: true,
                        data: data.year[1]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.chart3 {
    width: 100%;
    height: 100%;
}
</style>